<template>
    <div>
        <a-button :type="item.id ? 'default' : 'primary'" @click="handClick">{{ item.id
            ? '编辑' : '新增'
            }}</a-button>
        <a-drawer :title="item.id ? '编辑' : '新增'" placement="right" :closable="true" :visible="visible"
            :after-visible-change="afterVisibleChange" @close="onClose" width="calc(90vw - 200px)" :maskClosable="false"
            :confirm="savaLoading">
            <div class="drawerWrap">
                <div class="drawerWrap-header">
                    <a-form-model :model="formVal" layout="horizontal" :label-col="{ span: 8 }"
                        :wrapper-col="{ span: 16 }">
                        <a-row>
                            <a-col :span="0">
                                <a-form-model-item label="ID" props="id" style="margin: 0px;">
                                    <a-input v-model="formVal.id"></a-input>
                                </a-form-model-item>
                            </a-col>
                            <!-- 哪天点的新增就是哪天 -->
                            <a-col :span="0">
                                <a-form-model-item label="addTime" props="addTime" style="margin: 0px;">
                                    <a-input v-model="formVal.addTime"></a-input>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-model-item label="展示类型" props="showType" style="margin: 0px;">
                                    <a-select v-model="formVal.showType" @change="onChange">
                                        <a-select-option value="text">
                                            文字
                                        </a-select-option>
                                        <a-select-option value="picture">
                                            图片
                                        </a-select-option>
                                        <a-select-option value="textAndPicture">
                                            文字和图片
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="formVal.showType == 'textAndPicture' ? 6 : 0">
                                <a-form-model-item label="图片位置" props="imgPosition" style="margin: 0px;">
                                    <a-select v-model="formVal.imgPosition">
                                        <a-select-option value="left">
                                            图片在左
                                        </a-select-option>
                                        <a-select-option value="right">
                                            图片在右
                                        </a-select-option>
                                        <a-select-option value="top">
                                            图片在上
                                        </a-select-option>
                                        <a-select-option value="bottom">
                                            图片在下
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="['textAndPicture', 'text'].includes(formVal.showType) ? 6 : 0">
                                <a-form-model-item label="填充内容" style="margin: 0px;">
                                    <a-select v-model="formVal.fill">
                                        <a-select-option value="text">
                                            文字
                                        </a-select-option>
                                        <a-select-option value="table">
                                            表格
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="5">
                                <a-form-model-item style="margin: 0px;">
                                    <template #label>
                                        <span>排序</span>
                                        <a-tooltip title="数字越大越往后">
                                            <a-icon style="margin-left: 2px;margin-top: 14px;" type="info-circle" />
                                        </a-tooltip>
                                    </template>
                                    <a-input-number v-model="formVal.sorter" :default-value="0" style="width: 100%;"
                                        :min="0" :step="1" decimalSeparator="." :precision="0" :max="9999"
                                        @blur="numberBlur" placeholder="请输入排序">
                                    </a-input-number>

                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </a-form-model>
                </div>
                <div class="drawerWrap-content">
                    <ShowContent :formVal="formVal" :onChangeForm="onChangeForm"></ShowContent>
                </div>
                <div class="drawerWrap-footer">
                    <a-button style="margin-right: 8px" @click="onClose">
                        取消
                    </a-button>
                    <a-button type="primary" @click="drawerHanderClick">
                        确认
                    </a-button>
                </div>
            </div>
        </a-drawer>
    </div>
</template>
<script>
import ShowContent from './components/ShowContent';
import { judgeF } from './js/static';

let defFormVal = {
    showType: 'text',
    imgPosition: 'left',
    fill: 'text',
    sorter: 0,
    // 图片
    images: [],
    // 表头
    tableHead: [
        {
            title: '',
            dataIndex: new Date().getTime(),
            key: new Date().getTime(),
            id: new Date().getTime(),
            width: 1,
            align: 'center',
        }
    ],
    // 表数据
    tableData: [],
    // 标题
    title: '',
    titleSet: {
        family: '',// 字体
        fontSize: 'font24',// 字号
    },
    contentSet: {
        family: '',// 字体
        fontSize: 'font15',// 字号
    },
    // 默认添加几项的东西
    textInfo: [
        {
            label: '',
            value: '',
        },
    ],
};
export default {
    name: 'PPTAddButton',
    props: {
        onCallBack: {
            type: Function,
            default: () => { }
        },
        item: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    components: {
        ShowContent,
    },
    data() {
        return {
            visible: false,
            formRef: '',
            // form: this.$form.createForm(this, { name: 'coordinated' }),
            formVal: {

            },
            savaLoading: false,
        }
    },
    mounted() {

    },
    methods: {
        init() {
            let newFormVal = {
                ...this.formVal,
                ...JSON.parse(JSON.stringify(defFormVal)),
            }
            if (Object.keys(this.item).length > 0) {
                newFormVal = {
                    ...newFormVal,
                    ...JSON.parse(JSON.stringify(this.item)),
                }
            }

            this.formVal = newFormVal;
        },
        handClick() {
            this.init()
            this.visible = true;
        },
        onClose() {
            this.visible = false;
            this.init()
        },
        drawerHanderClick() {
            let params = {
                ...this.formVal,
            }
            let judge = judgeF(params);
            if (typeof (judge) == 'string') {
                this.$message.error(judge);
                return;
            } else {
                params = judge
            }
            // 校验判断
            this.savaLoading = true;
            this.postAxios(this.$addXLDaySecureQQCTN, params)
                .then((res) => {
                    if (res) {
                        if (res.code == 200) {
                            this.$message.success({
                                content: res.msg || '操作成功',
                                duration: 2.5,
                            });
                            this.onClose();
                            if (typeof (this.onCallBack) == 'function') {
                                this.onCallBack();
                            }
                        } else {
                            this.$message.error(res.msg || '操作失败');
                        }
                    }
                })
                .finally(() => {
                    this.savaLoading = false;
                });
        },
        afterVisibleChange() { },
        onChangeForm(dataIndex, values) {
            this.formVal = {
                ...this.formVal,
                [dataIndex]: values,
            }
        },
        // 当类型修改时将 图片位置默认为left 否则样式有问题
        onChange(e) {
            this.formVal = {
                ...this.formVal,
                imgPosition: 'left',
            }

        },
        numberBlur(e) {
            if (!this.formVal.sorter) {
                this.formVal.sorter = 0;
            }
        }
    }
}
</script>
<style lang="less" scoped>
::v-deep {
    .ant-drawer-body {
        padding: 0px;
    }
}

.drawerWrap {
    height: calc(100vh - 110px);

    &-header {}

    &-footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        left: 0;
        background: #fff;
        border-radius: 0 0 4px 4px;
    }

    &-content {
        width: 100%;
        height: calc(100vh - 148px);
    }
}
</style>